<template>
    <div class="player-progress-area">
        <div class="player-progress-wrap" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" ref="progress">
            <div class="player-progress" :class="isActive ? 'state-active' : ''">
                <div class="player-progress-schedule-wrap">
                    <div class="player-progress-schedule">
                        <div class="player-progress-schedule-buffer" :style="`transform: scaleX(${props.bufferPer});`">
                        </div>
                        <div class="player-progress-schedule-current"
                            :style="`transform: scaleX(${props.currentPer});`">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

let inTimer;  // 节流计时器
let outTimer;

const isActive = ref(false)     // 光标是否悬停进度条
const isDragging = ref(false)   // 是否正在拖动

const props = defineProps({
    // 缓存百分比 小数0~1
    bufferPer: {
        type: Number,
        default: 0.00001
    },
    // 当前进度百分比 小数0~1
    currentPer: {
        type: Number,
        default: 0.00001
    },
    // 外部控制进度条粗细
    activing: {
        type: Boolean,
        default: false
    },
});

const handleMouseEnter = () => {
    inTimer = setTimeout(() => {
        isActive.value = true;
    }, 200);
};

const handleMouseLeave = () => {
    clearTimeout(inTimer);
    if (!isDragging.value) {
        outTimer = setTimeout(() => {
            isActive.value = false;
        }, 50);
    }
};

const progress = ref(null)
const emit = defineEmits(['changeCurrent']);

const initDrag = () => {

    let offsetX, currPer;

    // 鼠标按下事件处理程序
    progress.value.addEventListener("mousedown", (e) => {
        isDragging.value = true;
        isActive.value = true;
        offsetX = e.clientX - progress.value.getBoundingClientRect().left;
        currPer = offsetX / progress.value.getBoundingClientRect().width;
        emit("changeCurrent", currPer);
    });

    // 鼠标移动事件处理程序
    document.addEventListener("mousemove", (e) => {
        if (!isDragging.value) return;
        e.preventDefault();
        offsetX = e.clientX - progress.value.getBoundingClientRect().left;
        currPer = offsetX / progress.value.getBoundingClientRect().width;
        currPer = Math.max(0.00001, currPer);
        currPer = Math.min(0.99999, currPer);
        emit("changeCurrent", currPer);
    });

    // 鼠标释放事件处理程序
    document.addEventListener("mouseup", () => {
        isDragging.value = false;
        isActive.value = false;
    });

};

onMounted(() => {
    initDrag();
});

watch(isDragging, (current) => {
    clearTimeout(outTimer);
    isActive.value = current;
});

</script>

<style scoped>
.player-progress-area {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.player-progress-wrap {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 16px;
    padding-bottom: 6px;
}

.player-progress {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2px;
    position: relative;
    width: 100%;
}

.state-active {
    height: 4px;
}

.player-progress-schedule-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
}

.player-progress-schedule {
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: 1.5px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

.player-progress-schedule-buffer {
    background-color: hsla(0, 0%, 100%, .3);
}

.player-progress-schedule-current {
    background-color: var(--brand_pink);
}

.player-progress-schedule-buffer,
.player-progress-schedule-current {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
</style>